<template>
  <div @click.stop="() => {}" v-if="isChange">
    <transition :name="transName" mode="out-in">
      <keep-alive>
        <component
          ref="comRef"
          type="exam"
          :is="page"
          :analysisPage="page"
          exam-type="common"
          :jump-to-dayi="goToAsk"
          :keyId="questionData.indexId"
          :keyContent="examQuestion.exam_name"
          @analysisPageChange="analysisPageChange"
        ></component>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import comments from '@/components/exam/comments.vue'
import zlDayi from '@/components/dayi.vue'
import examNote from '@/components/exam/examNote.vue'

export default {
  components: {
    comments,
    'zl-dayi': zlDayi,
    'exam-note': examNote
  },
  props: {
    'exam-title': {
      type: String,
      default: ''
    },
    'group-name': {
      type: String,
      default: ''
    },
    analysisPage: {
      type: String,
      default: ''
    },
    progress: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isChange: true, // 切换题目
      page: '',
      transName: ''
    }
  },
  computed: {
    subQuestionIndex() {
      return this.$store.state.exam.subQuestionIndex
    },
    query() {
      if (typeof window === 'undefined') {
        return {}
      }
      return this.getQuery(location.search)
    },
    examQuestion() {
      return this.$store.state.exam.examQuestion || {}
    },
    questionData() {
      return this.$store.state.exam.currentQuestion
    }
  },
  watch: {
    'questionData.indexId'() {
      this.isChange = false
    },
    analysisPage(newVal, oldVal) {
      if (!newVal) {
        this.transName = 'component-fade-opacityd'
      } else {
        this.isChange = true
        this.transName = oldVal
          ? 'component-fade-opacityd-1'
          : 'component-fade-opacityd'
      }
      setTimeout(() => {
        this.page = newVal
      }, 0)
    }
  },
  methods: {
    async init() {
      let { analysisPage } = this
      await this.sleep(100)
      let { comRef } = this.$refs
      if (
        comRef &&
        ['comments', 'zl-dayi', 'exam-note'].includes(analysisPage)
      ) {
        comRef.init()
      }
    },

    analysisPageChange(row) {
      this.$emit('analysisPageChange', row)
    },

    // 前往答疑中心
    goToAsk() {
      let {
        exam_id,
        subject_id,
        exam_type,
        subject_name,
        group_name,
        profession_name,
        label,
        profession_id
      } = this.query
      let { question_id } = this.questionData
      let params = {
        exam_id,
        exam_name: this.examTitle || label,
        exam_type,
        group_name: this.groupName || group_name,
        pro_name: profession_name,
        profession_id: profession_id,
        progress: this.progress,
        small_stem_index: this.subQuestionIndex || 0, // 综合题id
        question_id,
        sub_name: subject_name,
        subject_id,
        from: 'ques'
      }
      this.goTo('/ask/', {
        query: params,
        target: '_blank',
        watch: true
      })
      this.zlaBtn = {
        key_name: '答疑',
        key_content: '答疑'
      }
    }
  }
}
</script>

<style scoped name="csslint-ignore">
.component-fade-opacityd-1-enter-active,
.component-fade-opacityd-enter-active,
.component-fade-opacityd-leave-active {
  transition: all 0.3s ease;
}

.component-fade-opacityd-enter,
.component-fade-opacityd-1-enter {
  opacity: 0;
  transform: translateX(420px);
}

.component-fade-opacityd-leave-to {
  opacity: 0;
  transform: translateX(420px);
}
</style>
